<template>
  <div class="feedback">
    <div style="margin: 10px">
      <el-input v-model="listQuery.createName" placeholder="请输入反馈人"
                style="width: 180px;margin-right: 5px;margin-left: 10px"
                class="filter-item"
      />
      <el-input v-model="listQuery.title" placeholder="请输入标题"
                style="width: 180px;margin-right: 5px;margin-left: 5px"
                class="filter-item"
      />
      <el-input v-model="listQuery.content" placeholder="请输入内容"
                style="width: 180px;margin-right: 5px;margin-left: 5px"
                class="filter-item"
      />
      <el-select @clear="clearStatus" v-model="selectedStatusName" placeholder="反馈状态" clearable
                 class="filter-item"
                 style="margin-right: 5px;width: 100px">
        <el-option @click.native="selectStatus(item.status)" v-for="item in statusList"
                   :key="item.status"
                   :value="item.name"
        />
      </el-select>
      <el-select @clear="clearType" v-model="selectedTypeName" placeholder="反馈类型" clearable
                 class="filter-item"
                 style="margin-right: 5px;width: 110px">
        <el-option @click.native="selectType(item.type)" v-for="item in typeList"
                   :key="item.type"
                   :value="item.name"
        />
      </el-select>
      <el-button class="filter-item" type="warning" icon="el-icon-refresh" @click="resetCondition"
                 style="margin-bottom: 5px;margin-left: 10px"
      >
        重置
      </el-button>
      <el-button class="filter-item" type="danger" icon="el-icon-search" @click="searchFeedback"
                 style="margin-bottom: 5px;"
      >
        查找
      </el-button>

      <el-tooltip class="item" effect="dark" content="刷新" placement="top" style="float: right">
        <!-- span是button的外层友链 -->
        <el-button class="filter-item" type="" icon="el-icon-refresh-left" @click="getList"
                   style="margin-bottom: 5px;margin-left: 10px;"
                   circle
        ></el-button>
      </el-tooltip>
    </div>

    <!--  回复反馈  -->
    <el-dialog title="反馈回复" :visible.sync="showReplyDialog"
               @close="closeReplyDialog"
    >
      <el-form :rules="rules">
        <el-form-item label="反馈内容" :label-width="formLabelWidth" prop="name">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="replyData.replyContent"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showReplyDialog = false">取 消</el-button>
        <el-button type="danger" @click="submitReply">确 定</el-button>
      </div>
    </el-dialog>

    <!--  反馈详情  -->
    <el-dialog title="反馈详情" :visible.sync="showFeedbackDialog"
               @close="closeReplyDialog"
    >
      <el-form :rules="rules">
        <el-form-item label="标题：" :label-width="formLabelWidth">
          <span>{{ feedbackDetail.title }}</span>
        </el-form-item>
        <el-form-item label="反馈人：" :label-width="formLabelWidth">
          <span>{{ feedbackDetail.createName }}</span>
        </el-form-item>
        <el-form-item label="反馈时间：" :label-width="formLabelWidth">
          <span>{{ feedbackDetail.createTime }}</span>
        </el-form-item>
        <el-form-item label="反馈内容：" :label-width="formLabelWidth">
          <span>{{ feedbackDetail.feedbackContent }}</span>
        </el-form-item>
        <el-form-item label="反馈状态：" :label-width="formLabelWidth">
          <el-tag v-if="feedbackDetail.status === '已开启'" type="success">{{ feedbackDetail.status }}</el-tag>
          <el-tag v-if="feedbackDetail.status === '已完成'" type="">{{ feedbackDetail.status }}</el-tag>
          <el-tag v-if="feedbackDetail.status === '已拒绝'" type="danger">{{ feedbackDetail.status }}</el-tag>
          <el-tag v-if="feedbackDetail.status === '进行中'" type="warning">{{ feedbackDetail.status }}</el-tag>
        </el-form-item>
        <el-form-item label="反馈类型：" :label-width="formLabelWidth">
          <el-tag v-if="feedbackDetail.type === 1" effect="plain" type="">系统问题</el-tag>
          <el-tag v-if="feedbackDetail.type === 2" effect="plain" type="warning">内容问题</el-tag>
          <el-tag v-if="feedbackDetail.type === 3" effect="plain" type="danger">我要吐槽</el-tag>
        </el-form-item>
        <el-form-item>
          <hr>
        </el-form-item>
        <el-form-item label="回复人：" :label-width="formLabelWidth">
          <span>{{ feedbackDetail.updateName }}</span>
        </el-form-item>
        <el-form-item label="回复时间：" :label-width="formLabelWidth">
          <span>{{ feedbackDetail.updateTime }}</span>
        </el-form-item>
        <el-form-item label="回复内容：" :label-width="formLabelWidth">
          <span>{{ feedbackDetail.replyContent }}</span>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-table
        border
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
    >
      <el-table-column
          type="selection"
          width="55"
      >
      </el-table-column>
      <el-table-column
          label="序号"
          max-width="80"
      >
        <template slot-scope="scope">
          {{ scope.$index + 1 + (listQuery.pageNum - 1) * listQuery.pageSize }}
        </template>
      </el-table-column>
      <el-table-column
          prop="createName"
          label="反馈人"
          max-width="120"
      >
      </el-table-column>
      <el-table-column
          prop="title"
          label="标题"
          min-width="120"
      >
      </el-table-column>
      <el-table-column
          prop="status"
          label="反馈状态"
          max-width="110"
      >
        <template v-slot="scope">
          <el-tag v-if="scope.row.status === '已开启'" type="success">{{ scope.row.status }}</el-tag>
          <el-tag v-if="scope.row.status === '已完成'" type="">{{ scope.row.status }}</el-tag>
          <el-tag v-if="scope.row.status === '已拒绝'" type="danger">{{ scope.row.status }}</el-tag>
          <el-tag v-if="scope.row.status === '进行中'" type="warning">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="type"
          label="反馈类型"
          max-width="110"
      >
        <template v-slot="scope">
          <el-tag v-if="scope.row.type === 1" effect="plain" type="">系统问题</el-tag>
          <el-tag v-if="scope.row.type === 2" effect="plain" type="warning">内容问题</el-tag>
          <el-tag v-if="scope.row.type === 3" effect="plain" type="danger">我要吐槽</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="feedbackContent"
          label="反馈内容"
          min-width="180"
      >
      </el-table-column>
      <el-table-column
          prop="replyContent"
          label="回复"
          min-width="180"
      >
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="165"
      >
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          min-width="160"
      >
        <template slot-scope="scope">
          <el-popconfirm
              @onConfirm="reject(scope.$index, scope.row)"
              title="确定要拒绝该反馈吗？"
          >
            <template v-if="scope.row.status === '已开启'">
              <el-button slot="reference"
                         size="mini"
                         type="danger"
              >拒绝
              </el-button>
            </template>
            <template v-else>
              <el-button slot="reference"
                         disabled
                         size="mini"
                         type="danger"
              >拒绝
              </el-button>
            </template>
          </el-popconfirm>

          <span style="margin:0 5px">
            <template v-if="scope.row.status === '已开启'">
              <el-button
                  size="mini"
                  @click="showReply(scope.$index, scope.row)"
              >回复
              </el-button>
            </template>
            <template v-else>
              <el-button
                  v-if="scope.row.status !== '已开启'"
                  disabled
                  size="mini"
                  @click="showReply(scope.$index, scope.row)"
              >回复
              </el-button>
            </template>
          </span>

          <el-button
              size="mini"
              type="primary"
              @click="queryFeedbackDetail(scope.$index, scope.row)"
          >详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--  分页  -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import {queryFeedbackPage, queryFeedbackStatus, queryFeedbackType, rejectFeedback, replyFeedback} from "@/api/feedback";
import {hideFullScreenLoading, showFullScreenLoading} from "@/utils/loading";

export default {
  data() {
    return {
      statusList: [],
      typeList: [],
      selectedStatusName: '',
      selectedTypeName: '',
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        status: -1,
        type: -1,
        title: '',
        content: '',
        createName: ''
      },
      showReplyDialog: false,
      showFeedbackDialog: false,
      replyData: {
        id: '',
        replyContent: '',
      },
      tableData: [],
      total: 0,
      feedbackDetail: {},
      formLabelWidth: '190px',
      rules: {
        name: [
          {required: true, message: '请输入反馈内容', trigger: 'blur'}
        ],
      }
    }
  },
  created() {
    showFullScreenLoading()
    this.getInitFeedbackStatusList()
    this.getInitFeedbackTypeList()
    this.getList()
    hideFullScreenLoading()
  },
  methods: {
    closeReplyDialog() {
      this.replyData = {id: '', replyContent: ''};
      this.showReplyDialog = false;
    },
    queryFeedbackDetail(index, row) {
      console.log(row)
      this.showFeedbackDialog = true;
      if (row.status !== '已完成') {
        row.replyContent = ''
        row.updateName = ''
        row.updateTime = ''
      }
      this.feedbackDetail = row;
    },
    submitReply() {
      if (this.replyData.replyContent === '') {
        return;
      }
      this.showReplyDialog = false;
      replyFeedback(this.replyData).then(res => {
        if (res.code === 200) {
          this.$message.success('回复成功');
          this.getList();
        }
      })
    },
    async getList() {
      showFullScreenLoading()
      await queryFeedbackPage(this.listQuery).then(res => {
        this.tableData = res.data.rows
        this.total = parseInt(res.data.total)
        hideFullScreenLoading()
      }).catch(() => {
        hideFullScreenLoading()
      })
    },
    resetCondition() {
      this.listQuery.status = '';
      this.listQuery.type = '';
      this.listQuery.title = '';
      this.listQuery.content = '';
      this.listQuery.createName = '';
      this.selectedStatusName = '';
      this.selectedTypeName = '';
      this.getList();
    },
    clearStatus() {
      this.listQuery.status = '';
    },
    clearType() {
      this.listQuery.type = '';
    },
    getInitFeedbackTypeList() {
      queryFeedbackType().then(res => {
        if (res.code === 200) {
          this.typeList = res.data;
        }
      })
    },
    getInitFeedbackStatusList() {
      queryFeedbackStatus().then(res => {
        if (res.code === 200) {
          this.statusList = res.data;
        }
      })
    },
    selectStatus(status) {
      this.listQuery.status = status;
    },
    selectType(type) {
      this.listQuery.type = type;
    },
    searchFeedback() {
      this.getList()
    },
    reject(index, row) {
      rejectFeedback(row.id).then(res => {
        if (res.code === 200) {
          this.$message.success('已拒绝反馈');
          this.getList()
        }
      })
    },
    deleteReply() {

    },
    // eslint-disable-next-line no-unused-vars
    showReply(index, row) {
      this.showReplyDialog = true;
      this.replyData.id = row.id
    },
    handleSizeChange(pageSize) {
      this.listQuery.pageSize = pageSize
      this.getList()
    },
    handleCurrentChange(pageNum) {
      this.listQuery.pageNum = pageNum
      this.getList()
    },
    handleSelectionChange(val) {
      this.selectedRowIds = this.$refs.multipleTable.selection.map((item) => item.id)
      this.selectedRows = val
    },
    handleHeadAddClass({column}) {
      this.listQuery.sortArr.forEach(item => {
        if (item.prop === column.property) {
          column.order = item.order
        }
      })
    },

  }
}
</script>

<style scoped>

</style>
